<!DOCTYPE html>
<html lang="en">
<head>
    <title>修改车辆信息</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/laypage.css">
    <link rel="stylesheet" type="text/css" href="/laydate/theme/default/laydate.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
    <script src="/js/jquery.validation/1.14.0/messages_zh.min.js"></script>
    <script src="/js/vue/vue.min.js"></script>
    <script src="/js/layer/layer.js" charset="utf-8"></script>
    <script src="/laydate/laydate.js"></script>

</head>
<body>
<div class="row">
    <div class="col-lg-12">
        <section class="panel">
            <header class="panel-heading">
                修改车辆信息
            </header>
            <div class="panel-body">
                <div class="form" id="app">
                    <form class="cmxform form-horizontal" id="editCarsForm" action="/cars/updateCars.do"
                          enctype="multipart/form-data" method="POST" style="width: 500px;margin: 0 auto;">

                        <input type="hidden" name="carUuid" value="${data.carUuid}">
                        <div class="form-group">
                            <label for="licenseNum" class="control-label col-lg-3"><span style="color: brown;">*</span>车牌号</label>
                            <div class="col-lg-6">
                                <input class=" form-control" id="licenseNum" name="licenseNum"
                                       value="${(data.licenseNum)?default("")}" type="text">
                            </div>
                            <span id="tishi"></span>
                        </div>
                        <div class="form-group ">
                            <label for="color" class="control-label col-lg-3"><span
                                    style="color: brown;">*</span>颜色</label>
                            <div class="col-lg-6">
                                <input class=" form-control" id="color" name="color" type="text"
                                       value="${(data.color)?default("")}">
                            </div>
                        </div>
                        <div class="form-group ">
                            <label for="price" class="control-label col-lg-3"><span
                                    style="color: brown;">*</span>价格</label>
                            <div class="col-lg-6">
                                <input class=" form-control" id="price" name="price" type="text"
                                       value="${(data.price)?default("")}">
                            </div>
                        </div>
                        <div class="form-group ">
                            <label for="buyDate" class="control-label col-lg-3"><span style="color: brown;">*</span>购买日期</label>
                            <div class="col-lg-6">
                                <input class=" form-control" id="buyDate" name="buyDate" type="text"
                                       value="${(data.buyDate)?default("")}">
                                <script>
                                    //执行一个laydate
                                    laydate.render({
                                        elem: '#buyDate' //指定元素
                                    });
                                </script>
                            </div>
                        </div>
                        <div class=" form-group ">
                            <label for="engineNum" class="control-label col-lg-3"><span style="color: brown;">*</span>发动机号</label>
                            <div class="col-lg-6">
                                <input class=" form-control" id="engineNum" name="engineNum" type="text"
                                       value="${(data.engineNum)?default("")}">
                            </div>
                        </div>
                        <div class=" form-group ">
                            <label for="brand" class="control-label col-lg-3"><span
                                    style="color: brown;">*</span>车辆品牌</label>
                            <div class="col-lg-6">
                                <input class=" form-control" id="brand" name="brand" type="text"
                                       value="${(data.brand)?default("")}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="brandType" class="control-label col-lg-3"><span style="color: brown;">*</span>品牌系列</label>
                            <div class="col-lg-6">
                                <input class=" form-control" id="brandType" name="brandType"
                                       type="text" value="${(data.brandType)?default("")}"/>
                            </div>
                        </div>

                        <div class=" form-group ">
                            <label for="file" class="control-label col-lg-3"> <span
                                    style="color: brown;">*</span>车辆照片</label>

                            <input type="hidden" name="xxxVO.logoPath" id="imgFileFullPath"
                                   value="<s:property value='xxxVO.logoPath'/>">
                            <div class="" id="picId" title="点击选择图片"
                                 onclick="$('#fileId').click();">
                                <s:if test="xxxVO.logoPath!=null&&xxxVO.logoPath!=''"><img
                                        style="width: 50px;height: 40px;" id="preview"
                                        src="<s:property value='xxxVO.logoPath'/>"></s:if>
                                <s:else><img src="/uploadFiles/${(data.pic)?default("")}"
                                             style="width: 30px; height: 30px"/></s:else>
                            </div>
                            <input id="fileId" type="file"
                                   onchange="javascript:setImagePreview();" name="file"
                                   style="margin-left: 500px;margin-top: -10px"/>
                            <input type="hidden" id="imgFileName" name="file"/></td>

                        </div>

                        </div>
                        <div class="btn-group">
                            <label for="type">车辆类型</label>
                            <select name="auto" class="select">
                                <option value="私家车">私家车</option>
                                <option value="商用车">商用车</option>
                            </select>
                        </div>
                <div class="form-group">
                    <div class="col-lg-offset-3 col-lg-6">
                        <button class="btn btn-primary" id="saveBtn" type="button">提交</button>
                        <button class="btn btn-default" id="cancelBtn" type="button">取消</button>
                    </div>
                </div>
              </form>
            </div>
        </div>
    </section>
   </div>
</div>


</body>
</html>
<script>
    /**
     * 图片上传及时显示
     * @returns {boolean}
     */
    function setImagePreview() {
        document.getElementById("imgFileName").value = document.getElementById("fileId").value;
        var docObj = document.getElementById("fileId");
        var picDivHtml = " ";
        // 更改失败，显示原有的图片
        var logoPath = $("#imgFileFullPath").val();
        if (logoPath && logoPath != '') {
            picDivHtml = '<img style="width: 50px;height: 50px;" id="preview"  src="' + logoPath + '">';
        }

        if (docObj.files && docObj.files[0]) {
            //计算文件大小
            var size = Math.floor(docObj.files[0].size / 1024);
            if (size > 2 * 1024) {
                alert("文件限制最大为2M");
            } else {
                picDivHtml = '<img width="50px" height="50px" id="preview" src="'
                        + window.URL.createObjectURL(docObj.files[0])
                        + '">';
            }
        }
        document.getElementById("picId").innerHTML = picDivHtml;
        return true;
    }


    var updateCars = function () {
        var formData = new FormData($("#editCarsForm")[0]);
        $.ajax({
            type: 'POST',
            contentType: false,
            processData: false,
            dataType: 'json',
            data: formData,
            url: '/cars/cars_update.do',
            success: function () {
                $("#cancelBtn").click();
            }
        });
    }

    $("#saveBtn").click(function () {
        updateCars();
    });

    $("#cancelBtn").click(function () {
        var index = parent.layer.getFrameIndex(window.name);
        parent.getCarsPageList();
        parent.layer.close(index);

    })


</script>
